<template>
  <view class="container">
    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload
        ref="img_logo"
        name="img_logo"
        :maxCount="1"
        :fileList="filelist"
        width="100"
        height="100"
        @delete="del"
        @afterRead="read"
      />
    </view>

    <view class="secetion">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="brank"
        :rules="rules"
        ref="product"
      >
        <!-- 名称 -->
        <u-form-item label="名称" prop="name">
          <u-input v-model="brank.name" placeholder="牌名称未知" />
        </u-form-item>

        <u-form-item
          label="商品分类"
          prop="store"
          borderBottom
          @click="showtype = true"
        >
          <u-input
            v-model="brank.typename_text"
            disabled
            inputAlign="center"
            disabledColor="#ffffff"
            placeholder="请选择商品所属分类"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <!-- 品牌描述 -->
        <u-form-item label="描述" prop="content" borderBottom>
          <u-textarea
            placeholder="不低于3个字"
            v-model="brank.content"
            count
          ></u-textarea>
        </u-form-item>

        <u-popup :show="showtype" @close="closeprotype" @open="openprotype">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in protypedata" :key="index">
                <view class="branktypename" @click="protypeSelect(item)">
                  <u-cell :title="item.name" >

                  </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>
        <!-- 提交按钮 -->
        <u-button
          text="修改品牌"
          icon="pushpin"
          size="small"
          type="success"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.brand_id = options.brand_id ? options.brand_id : 0,
    this.auth = this.$u.auth.check();

    this.brankinfo();
    this.getproducttype();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      filelist: [],
      auth: {},
      stoid: null,
      protype:false,
      protypedata: [],

      showtype: false,
      newthumbArr:[],
      img_logo: "",
      piclist: [],
      name: "",
      brand_id: 0,
      brank: {
        id: 0,
        content: "",
        img_logo: "",
        name: "",
		typename_text:"",
      },
      showbrank: false,
      rules: {
        content: {
          required: true,
          message: "不低于3个字",
          trigger: ["change"],
        },

        name: {
          required: true,
          message: "请填写商品名称",
          trigger: ["blur", "change"],
        },
        img_logo: {
          required: true,
          message: "请填上传品牌图片",
          trigger: ["blur", "change"],
        },
      },
    };
  },

  methods: {
    closeprotype()
    {
      this.protype = false
    },
    openprotype()
    {
      this.protype = true
    },
    protypeSelect(e) {
      this.brank.typename_text = e.name,
	  this.brank.ptypeid = e.id;
    this.showtype = false
    },

    async getproducttype() {
      let data = {
        adminid: this.auth.id,
      };

      let result = await this.$u.api.product.getprotypedata(data);

      if (result.code) {
        this.protypedata = result.data;
      }
    },
    async del(e) {

          let data = {
            img_logo: e.file.url,
            brand_id:this.brand_id
          };
          var result = await this.$u.api.product.delbrankthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
              
                  this.filelist = [];
                  this.brank.img_logo = ""
                
              },
            });
            return false;
          }
   
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.brank.img_logo = result.data;
        this.newthumbArr = this.newthumbArr.concat(result.data)
        this.filelist = [{ url: result.data }];


    

      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },

    product() {
      this.$refs.product
        .validate()
        .then(async () => {
          var data = {
            id: this.brand_id,
            ptypeid: this.brank.ptypeid,
            adminid: this.auth.id,
            name: this.brank.name,
            img_logo: this.brank.img_logo,
            content: this.brank.content,
            brand_id: this.brand_id,
            newthumbArr:this.newthumbArr
          };

          let result = await this.$u.api.product.brankedit(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.$u.route({
                  type: "redirectTo",
                  url: "/pagesC/product/brank/edit",
                  params: {
                    brand_id: this.brand_id,
                  },
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },

    async brankinfo() {
      let data = {
        adminid: this.auth.id,
        brand_id: this.brand_id,
      };
      let result = await this.$u.api.product.brankfind(data);
      if (result.code) {
        this.brank = result.data;

        if (this.brank.thumb_text != "") {
          this.filelist = [{ url: this.brank.thumb_text }];
        }
      }
    },
  },
};
</script>

<style>
.secetion {
  padding: 20px;
}

.branktypename{
  text-align: center;
}
.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.u-form-item__body__left__content__label.data-v-5e7216f1 {
  width: 75px;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}
</style>
